<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<title>照片墙画廊</title>
		<link rel="stylesheet" type="text/css" href="../../util/Photo wall/css/demo.css" />
		<link rel="stylesheet" type="text/css" href="../../util/Photo wall/css/component.css" />
		<script src="../../util/Photo wall/js/modernizr.min.js"></script>
		<link rel="stylesheet" href="../../util/bootstrap-3.3.7-dist/css/bootstrap.css">
		<script src="../../util/jq/jquery-3.4.0.js"></script>
		<script rel="stylesheet" src="../../util/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
		<style>
			*{
				padding: 0;
				margin: 0;
				list-style: none;
			}
			body{
				background: white;
			}
			#_photobox{
				background: #f2f2f2;
				padding: 30px;
				position: relative;
				top: 0;
				left:0;
				height: 600px;
			}
			._photocontent{
				float: left;
				width: 99%;
				height: 100%;
				background: white;
				margin-top: 50px;
			}

		</style>
	</head>
<body>
	<div class="container-fluid " id="_photobox">
		<!--面包屑-->
		<div>
			<ol class="breadcrumb nav-road navbar navbar navbar-default navbar-fixed-top" style="background: white;">
				<li><a href="#">首页</a></li>
				<li class="active">照片墙</li>
			</ol>
		</div>
		<!--内容-->
		<div class="_photocontent">
			<!--标题-->
			<div id="_head-lxm" class="row " style="background: white;">
				<h1 class="col-md-12 col-lg-12 text-center">和你的每一刻都不想错过</h1>
				<p class="col-md-12 col-lg-12 text-right"><button class="btn">我也要发布</button></p>
			</div>
			<!--照片-->
			<div class="row " style="height: 100px;background: white;" >
				<section id="photostack-3" class="photostack col-lg-12 col-md-12 text-center" style="height:400px; ">
					<div>
						<figure>
							<a href="http://www.htmleaf.com/" class="photostack-img"><img src="../../util/Photo wall/img/5.jpg" alt="img05"/></a>
							<figcaption>
								<h2 class="photostack-title">Speed Racer</h2>
								<div class="photostack-back">
									<p>Here he comes Here comes Speed Racer. He's a demon on wheels. Wouldn't you like to get away? Sometimes you want to go where everybody knows <span>the</span> your name. And they're always glad you came! </p>
								</div>
							</figcaption>
						</figure>
						<figure>
							<a href="http://www.htmleaf.com/" class="photostack-img"><img src="../../util/Photo wall/img/2.jpg" alt="img02"/></a>
							<figcaption>
								<h2 class="photostack-title">Happy Days</h2>
								<div class="photostack-back">
									<p>These Happy Days are yours and mine Happy Days. It's a beautiful day in this neighborhood a beautiful day for a neighbor. Would you be mine?</p>
								</div>
							</figcaption>
						</figure>
						<figure>
							<a href="http://www.htmleaf.com/" class="photostack-img"><img src="../../util/Photo wall/img/3.jpg" alt="img03"/></a>
							<figcaption>
								<h2 class="photostack-title">Beautywood</h2>
								<div class="photostack-back">
									<p>It's a neighborly day in this beautywood a neighborly day for a beauty. Would you be mine? Could you be mine. Now the world don't move to the beat of just one drum.</p>
								</div>
							</figcaption>
						</figure>
						<figure>
							<a href="http://www.htmleaf.com/" class="photostack-img"><img src="../../util/Photo wall/img/1.jpg" alt="img01"/></a>
							<figcaption>
								<h2 class="photostack-title">Serenity Beach</h2>
								<div class="photostack-back">
									<p>I have never been to a place so serene in my entire life before. Swimming in clear waters opened my mind to nature and reminded me of my and <span>eveybody</span> everybody else's mortality.</p>
								</div>
							</figcaption>
						</figure>
						<figure>
							<a href="http://www.htmleaf.com/" class="photostack-img"><img src="../../util/Photo wall/img/4.jpg" alt="img04"/></a>
							<figcaption>
								<h2 class="photostack-title">Heaven of time</h2>
								<div class="photostack-back">
									<p>What might be right for you may not be right for some. And we know Flipper lives in a world full of wonder flying there-under under the sea.</p>
								</div>
							</figcaption>
						</figure>
						<figure>
							<a href="http://www.htmleaf.com/" class="photostack-img"><img src="../../util/Photo wall/img/6.jpg" alt="img06"/></a>
							<figcaption>
								<h2 class="photostack-title">Forever this</h2>
								<div class="photostack-back">
									<p>Fish don't fry in the kitchen and beans don't burn on the grill. Took a whole lotta tryin' just to get up that hill. Baby if you've ever wondered - wondered whatever became of me. </p>
								</div>
							</figcaption>
						</figure>
						<figure data-dummy>
							<a href="#" class="photostack-img"><img src="../../util/Photo wall/img/7.jpg" alt="img07"/></a>
							<figcaption>
								<h2 class="photostack-title">Lovely Green</h2>
							</figcaption>
						</figure>
						<figure data-dummy>
							<a href="#" class="photostack-img"><img src="../../util/Photo wall/img/8.jpg" alt="img08"/></a>
							<figcaption>
								<h2 class="photostack-title">Wonderful</h2>
							</figcaption>
						</figure>
						<figure data-dummy>
							<a href="#" class="photostack-img"><img src="../../util/Photo wall/img/9.jpg" alt="img09"/></a>
							<figcaption>
								<h2 class="photostack-title">Love Addict</h2>
							</figcaption>
						</figure>
						<figure data-dummy>
							<a href="#" class="photostack-img"><img src="../../util/Photo wall/img/10.jpg" alt="img10"/></a>
							<figcaption>
								<h2 class="photostack-title">Friendship</h2>
							</figcaption>
						</figure>
						<figure data-dummy>
							<a href="#" class="photostack-img"><img src="../../util/Photo wall/img/11.jpg" alt="img11"/></a>
							<figcaption>
								<h2 class="photostack-title">White Nights</h2>
							</figcaption>
						</figure>
						<figure data-dummy>
							<a href="#" class="photostack-img"><img src="../../util/Photo wall/img/12.jpg" alt="img12"/></a>
							<figcaption>
								<h2 class="photostack-title">Serendipity</h2>
							</figcaption>
						</figure>
						<figure data-dummy>
							<a href="#" class="photostack-img"><img src="../../util/Photo wall/img/13.jpg" alt="img13"/></a>
							<figcaption>
								<h2 class="photostack-title">Pure Soul</h2>
							</figcaption>
						</figure>
						<figure data-dummy>
							<a href="#" class="photostack-img"><img src="../../util/Photo wall/img/14.jpg" alt="img14"/></a>
							<figcaption>
								<h2 class="photostack-title">Winds of Peace</h2>
							</figcaption>
						</figure>
						<figure data-dummy>
							<a href="#" class="photostack-img"><img src="../../util/Photo wall/img/15.jpg" alt="img15"/></a>
							<figcaption>
								<h2 class="photostack-title">Shades of blue</h2>
							</figcaption>
						</figure>
						<figure data-dummy>
							<a href="#" class="photostack-img"><img src="../../util/Photo wall/img/16.jpg" alt="img16"/></a>
							<figcaption>
								<h2 class="photostack-title">Lightness</h2>
							</figcaption>
						</figure>
					</div>
				</section>
			</div><!-- /container -->
		</div>
	</div>
</body>
	<script src="../../util/Photo wall/js/classie.js"></script>
	<script src="../../util/Photo wall/js/photostack.js"></script>
	<script>
        new Photostack( document.getElementById( 'photostack-3' ), {
            callback : function( item ) {
            }
        } );
	</script>
</html>